<template>
  <section class="item-upload">
    <el-tag class="item-p" size="mini">{{ index +1 }}p</el-tag>
    <i class="item-music-icon" />
    <div class="item-info">
      <span class="item-title">{{ value.name }} {{ value.sort }}</span>
      <el-progress class="item-progress" :percentage="value.progress" />
      <div class="other-info">
        <span class="total-size">{{ value.size | numberFormatter(2) }}</span>
      </div>
    </div>
    <i v-if="value.isComplete===false" class="item-reupload el-icon-refresh-right" @click="uploadFail">
      <span style="font-size:12px">上传出错请重试</span>
    </i>
    <i class="item-delete el-icon-delete" @click="removeSelf" />
    <el-popover width="400" placement="bottom-end">
      <el-form label-position="left" label-width="80px" size="mini">
        <el-form-item label="标题">
          <el-input v-model="value.name" clearable type="text" />
        </el-form-item>
        <el-form-item>
          <el-button style="float:right" type="primary" @click="editSelf">确定</el-button>
        </el-form-item>
      </el-form>
      <i slot="reference" class="item-edit el-icon-edit"> 编辑信息 </i>
    </el-popover>
  </section>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    value: {
      type: Object,
      required: true
    }
  },
  methods: {
    uploadFail() {
      this.$emit('fail', this.value);
    },
    removeSelf() {
      this.$emit('delete', this.index, this.value);
    },
    editSelf() {
      this.$emit('upload', this.value);
    }
  }
};
</script>
